<template>
  <div class="work_sheet_procedure_sheet">
    <one-title title="工单工序上料表" @refreshData="refresh"></one-title>
    <mes-search :searchList="searchList"
                ref="mesSearch"
                :searchResult="searchResult"
                @searchInfo="_info">
    </mes-search>
    <div class="table_container">
      <el-table
        border
        stripe
        :data="listData.list"
        v-loading="isLoading"
        @sort-change="_sort"
        style="width: 100%">
        <el-table-column
          prop="workorderNumber"
          label="工单编号"
          width="110"
          align="center"
          sortable="custom"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="sort"
          label="工序序号"
          align="center"
          width="100"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="workstageName"
          label="工序名称"
          show-overflow-tooltip
          width="100">
        </el-table-column>
        <el-table-column
          prop="workorderTecProcNumber"
          label="工艺规程编号"
          align="center"
          sortable="custom"
          show-overflow-tooltip
          width="135">
        </el-table-column>
        <el-table-column
          prop="drawingNumber"
          label="图号"
          align="center"
          width="100"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="materialNumber"
          label="物料编码"
          align="center"
          width="110"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="materialName"
          label="物料名称"
          align="center"
          width="100"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="materialType"
          label="物料类型"
          align="center"
          width="100"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="specification"
          label="物料型号规格"
          align="center"
          width="126"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="materialGrade"
          label="物料等级"
          align="center"
          width="100"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="unit"
          label="计量单位"
          align="center"
          width="80"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="trackDemand"
          label="追溯要求"
          align="center"
          width="100"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="manufacturePurchase"
          label="制造外购"
          align="center"
          width="100"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="quantity"
          label="数量"
          align="center"
          width="80"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="companyId"
          label="制造单位"
          align="center"
          width="100"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="remarks"
          :resizable="false"
          label="备注"
          align="left"
          show-overflow-tooltip>
        </el-table-column>
      </el-table>
    </div>
    <mes-pagination
      @updateData="init"
      :currentPage="listData.pageNo"
      :total="listData.count || 0"
      :pageSize="listData.pageSize">
    </mes-pagination>
  </div>
</template>

<script>

export default {
  name: 'WorkSheetProcedureSheet',
  data() {
    return {
      // 数据加载
      isLoading: true,
      // 搜索列表数据
      searchData: {},
      // 搜索结果数
      searchResult: NaN,
      // 排序字段
      sortData: {}
    }
  },
  computed: {
    searchList() {
      let searchList = [
        {
          label: '工单编号',
          value: '',
          name: 'workorderNumber',
          type: 'input'
        },
        {
          label: '工序序号',
          value: '',
          name: 'sort',
          type: 'input'
        },
        {
          label: '工序名称',
          value: '',
          name: 'workstageName',
          type: 'input'
        },
        {
          label: '物料编码',
          value: '',
          name: 'materialNumber',
          type: 'input'
        },
        {
          label: '物料名称',
          value: '',
          name: 'materialName',
          type: 'input'
        },
        {
          label: '物料类型',
          value: '',
          name: 'materialTypeId',
          type: 'select',
          selectList: this.materialType
        },
        {
          label: '工艺规程编号',
          value: '',
          name: 'workorderTecProcNumber',
          type: 'input'
        },
        {
          label: '图号',
          value: '',
          name: 'drawingNumber',
          type: 'input'
        },
        {
          label: '物料型号规格',
          value: '',
          name: 'specification',
          type: 'input'
        },
        {
          label: '物料等级',
          value: '',
          name: 'gradeId',
          type: 'select',
          selectList: this.materialGrade
        },
        {
          label: '计量单位',
          value: '',
          name: 'unit',
          type: 'input'
        },
        {
          label: '追溯要求',
          value: '',
          name: 'trackDemandId',
          type: 'select',
          selectList: this.trackDemand
        },
        {
          label: '制造外购',
          value: '',
          name: 'manufacturePurchaseId',
          type: 'select',
          selectList: this.manufacturePurchaseType
        },
        {
          label: '制造单位',
          value: '',
          name: 'companyId',
          type: 'input'
        }]
      return searchList
    },
    // 列表数据
    listData() {
      return this.$store.state.workSheetProcedureSheet.listData
    },
    // 追溯要求
    trackDemand() {
      let trackDemand = this.$store.state.dict.trackDemand.labels || []
      return trackDemand.length > 0 ? [{id: '', label: '全部'}, ...trackDemand] : trackDemand
    },
    // 物料等级
    materialGrade() {
      let materialGrade = this.$store.state.dict.materialGrade.labels || []
      return materialGrade.length > 0 ? [{id: '', label: '全部'}, ...materialGrade] : materialGrade
    },
    // 制造外购
    manufacturePurchaseType() {
      let manufacturePurchaseType = this.$store.state.dict.manufacturePurchaseType.labels || []
      return manufacturePurchaseType.length > 0 ? [{
        id: '',
        label: '全部'
      }, ...manufacturePurchaseType] : manufacturePurchaseType
    },
    // 物料类型
    materialType() {
      let materialType = this.$store.state.dict.materialType.labels || []
      return materialType.length > 0 ? [{id: '', label: '全部'}, ...materialType] : materialType
    },
  },
  mounted() {
    this.init()
  },
  components: {
  },
  methods: {
    // 刷新方法
    refresh() {
      this.$refs.mesSearch.clean()
      this.searchData = {}
      this.sortData = {}
      this.init({
        pageNo: 1,
        pageSize: 15
      })
    },
    // 初始化方法
    init(page) {
      this.isLoading = true
      let postData = {
        method: 'post',
        url: 'a/workorderworkstagematerial/workorderWorkstageMaterial/list',
        data: {
          pageNo: page ? page.pageNo : 1,
          pageSize: page ? page.pageSize : 15,
          query: {
            delFlag: 0
          }
        },
        module: 'workSheetProcedureSheet',
        state: 'listData'
      }
      if (Object.keys(this.searchData).length > 0) {
        postData.data.query = this.searchData
      }
      if (Object.keys(this.sortData).length > 0) {
        postData.data.sort = this.sortData
      }
      this.$store.dispatch('saveData', postData).then((res) => {
        if (Object.keys(this.searchData).length > 0) {
          this.searchResult = res.count
        } else {
          this.searchResult = NaN
        }
      }).finally(() => {
        this.isLoading = false
      })
    },
    // 查询
    _info(data) {
      this.searchData = data
      this.init()
    },
    // 排序
    _sort(obj) {
      this.sortData = this.$getSortOrder(obj)
      this.init()
    }
  }
}
</script>

<style scoped lang="less">

</style>
